import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo", style: TextStyle(color: Colors.white)),
          backgroundColor: Colors.blue,
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取屏幕的宽高
    // final size = MediaQuery.of(context).size;
    return ListView(
      children: [
        Container(
          padding: EdgeInsets.all(10),
          alignment: Alignment.centerLeft,
          height: 40,
          child: Text("基础按钮："),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
                onPressed: () {
                  print("普通按钮");
                },
                child: Text("普通按钮")),
            TextButton(
                onPressed: () {
                  print("文本按钮");
                },
                child: Text("文本按钮")),
            OutlinedButton(onPressed: null, child: Text("边框按钮")),
            IconButton(onPressed: () {}, icon: Icon(Icons.thumb_up))
          ],
        ),
        Container(
          padding: EdgeInsets.all(10),
          alignment: Alignment.centerLeft,
          height: 40,
          child: Text("有图标的按钮："),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton.icon(
                onPressed: () {}, icon: Icon(Icons.send), label: Text("发送")),
            TextButton.icon(
                onPressed: () {}, icon: Icon(Icons.info), label: Text("消息")),
            OutlinedButton.icon(
                onPressed: () {}, icon: Icon(Icons.add), label: Text("增加"))
          ],
        ),
        Container(
          padding: EdgeInsets.all(10),
          alignment: Alignment.centerLeft,
          height: 40,
          child: Text("按钮的背景和文字颜色："),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
                style: ButtonStyle(
                    backgroundColor: WidgetStateProperty.all(Colors.red),
                    foregroundColor: WidgetStateProperty.all(Colors.white)),
                onPressed: () {},
                child: Text("普通按钮")),
            TextButton(
                style: ButtonStyle(
                    foregroundColor: WidgetStateProperty.all(Colors.red)),
                onPressed: () {},
                child: Text("文本按钮")),
          ],
        ),
        Container(
          padding: EdgeInsets.all(10),
          alignment: Alignment.centerLeft,
          height: 40,
          child: Text("按钮大小调整："),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              height: 50,
              width: 150,
              child: ElevatedButton(onPressed: () {}, child: Text("大按钮")),
            ),
            SizedBox(
              height: 30,
              width: 100,
              child: ElevatedButton.icon(
                  onPressed: () {},
                  icon: SizedBox(
                    width: 20,
                    height: 20,
                    child: Icon(Icons.search),
                  ),
                  label: Text("搜索")),
            ),
            SizedBox(
              height: 30,
              width: 100,
              child: ElevatedButton.icon(
                  onPressed: () {},
                  icon: SizedBox(
                    width: 20,
                    height: 20,
                    child: Image.network(
                      "https://www.itying.com/images/flutter/3.png",
                      fit: BoxFit.cover,
                    ),
                  ),
                  label: Text("搜索")),
            ),
          ],
        ),
        Container(
          alignment: Alignment.centerLeft,
          height: 40,
          child: Text("按钮自适应屏幕"),
        ),
        Row(
          children: [
            Expanded(
                flex: 1,
                child: Container(
                  margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
                  height: 40,
                  child: ElevatedButton(
                      onPressed: () {},
                      style: ButtonStyle(
                          backgroundColor: WidgetStateProperty.all(
                              Color.fromARGB(220, 255, 34, 0)),
                          foregroundColor:
                              WidgetStateProperty.all(Colors.white)),
                      child: Text("搜索")),
                ))
          ],
        ),
        Container(
          alignment: Alignment.centerLeft,
          height: 40,
          child: Text("圆角圆形按钮"),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
                style: ButtonStyle(
                    shape: WidgetStateProperty.all(RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12)))),
                onPressed: () {},
                child: Text("圆角按钮")),
            SizedBox(
              width: 80,
              height: 80,
              child: ElevatedButton(
                  style: ButtonStyle(
                      shape: WidgetStateProperty.all(CircleBorder(
                          side: BorderSide(width: 2, color: Colors.yellow)))),
                  onPressed: () {},
                  child: Text("圆形")),
            ),
          ],
        ),
        Container(
          alignment: Alignment.centerLeft,
          height: 40,
          child: Text("按钮边框"),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            OutlinedButton(
                style: ButtonStyle(
                    side: WidgetStateProperty.all(
                        BorderSide(width: 1, color: Colors.red))),
                onPressed: () {},
                child: Text("边框按钮"))
          ],
        )
      ],
    );
  }
  // 页面上显示一个容器 宽度是屏幕的宽度 高度是容器的
}
